<template>
<!--   :title="'人员详情(已完成派单：' + finishCount + ')'" -->
  <el-dialog
    title="人员详情"
    width="1200px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <el-form>
      <div class="dialog-box">
        <div class="dialog-box-item">
          <el-form-item label="头像" label-width="120px">
            <div class="value">
              <el-avatar size="medium" shape="square" :src="form.wxHeadimgurl"></el-avatar>
            </div>
          </el-form-item>
          <!-- <el-form-item label="用户名" label-width="120px">
            <div class="value">{{form.wxName}}</div>
          </el-form-item> -->
          <el-form-item label="微信昵称" label-width="120px">
            <div class="value">{{form.wxNickname}}</div>
          </el-form-item>
          <el-form-item label="性别" label-width="120px">
            <div class="value">{{sexData[form.wxSex]}}</div>
          </el-form-item>
          <!-- <el-form-item label="年龄" label-width="120px">
            <div class="value">{{form.age}}</div>
          </el-form-item> -->
          <el-form-item label="手机号" label-width="120px">
            <div class="value">{{form.wxPhone}}</div>
          </el-form-item>
          <el-form-item label="职业" label-width="120px">
            <div class="value">{{form.job}}</div>
          </el-form-item>
          <!-- <el-form-item label="婚姻状态" label-width="120px">
            <div class="value">{{marryData[form.marriage]}}</div>
          </el-form-item> -->
          <el-form-item label="备注" label-width="120px">
            <div class="value">{{form.introduce}}</div>
          </el-form-item>
        </div>

        <div class="dialog-box-item">
          <!-- <el-form-item label="审核状态" label-width="120px">
            <div class="value">{{form.status === 0 ? '待审核' : form.status === 1 ? '审核通过' : ''}}</div>
          </el-form-item>
          <el-form-item label="积分" label-width="120px">
            <div class="value">{{form.credit}}</div>
          </el-form-item>
          <el-form-item label="vip等级" label-width="120px">
            <div class="value">{{form.vipGrade}}</div>
          </el-form-item> -->
          <el-form-item label="分组" label-width="120px">
            <div class="value tag">
              <el-tooltip v-for="(item, index) in form.orderGroupVal"
                          :key="'group' + index"
                          effect="dark"
                          :content="item"
                          placement="top"
              >
                <el-tag type="info" size="small">{{item}}</el-tag>
              </el-tooltip>
            </div>
          </el-form-item>
          <!-- <el-form-item label="标签" label-width="120px">
            <div class="value tag">
              <el-tooltip v-for="(item, index) in form.orderLabelVal"
                          :key="'label' + index"
                          effect="dark"
                          :content="item"
                          placement="top"
              >
                <el-tag type="info" size="small">{{item}}</el-tag>
              </el-tooltip>
            </div>
          </el-form-item> -->
          <el-form-item label="邀请人微信/手机" label-width="120px">
            <div class="value">{{form.inName}}</div>
          </el-form-item>
<!--          <el-form-item label="邀请人手机" label-width="120px">-->
<!--            <div class="value">{{form.inPhone}}</div>-->
<!--          </el-form-item>-->
          <el-form-item label="最后登录时间" label-width="120px">
            <div class="value">{{form.lastLoginTime}}</div>
          </el-form-item>
        </div>

        <div class="dialog-box-item">
          <!-- <el-form-item label="好友数" label-width="120px">
            <div class="value">{{form.friendsCnt}}</div>
          </el-form-item> -->
          <!-- <el-form-item label="微信通讯录截图" label-width="120px">
            <div class="pic-box">
              <el-image :src="form.friendsPhotoUrl + '?v=' + new Date().getTime()"
                        lazy
                        :preview-src-list="[form.friendsPhotoUrl + '?v=' + new Date().getTime()]"
                        fit="contain"
              >
                <div slot="error" class="image-slot">暂无图片</div>
              </el-image>
              <div class="el-form-item__label">收款码</div>
              <el-image :src="form.payPhotoUrl + '?v=' + new Date().getTime()"
                        lazy
                        :preview-src-list="[form.payPhotoUrl + '?v=' + new Date().getTime()]"
                        fit="contain"
              >
                <div slot="error" class="image-slot">暂无图片</div>
              </el-image>
            </div>
          </el-form-item> -->
          <!-- <el-form-item label="微信通讯录录屏" label-width="120px">
            <div class="pic-box">
              <video class="video" v-if="form.friendsVideoUrl" controls :src="form.friendsVideoUrl + '?v=' + new Date().getTime()">您的浏览器不支持视频播放</video>
              <div class="no-video" v-else>暂无视频</div>
            </div>
          </el-form-item> -->
          <el-form-item label="常用位置" label-width="120px">
            <div class="gps-box" ref="map"></div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="examine" v-if="form.status === 0">审 核</el-button>
      <el-button type="success" @click="examine" disabled v-else-if="form.status === 1">审核通过</el-button> -->
      <!-- <el-button type="primary" @click="onHistoryOrder">历史派单</el-button> -->
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>

    <history-order
      v-if="historyVisible"
      :visible="historyVisible"
      :info="info"
      @close="closeHistory"
    />
  </el-dialog>
</template>

<script>
import { mapActions } from 'vuex'
import util from '@/libs/util.js'
import HistoryOrder from './history-order'

export default {
  name: 'person-info',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      historyVisible: false,
      labelData: {},
      groupData: {},
      sexData: {},
      marryData: {},
      form: {
        userId: '',
        username: '',
        mobile: '',
        wxOpenid: '',
        wxNickname: '',
        wxSex: '',
        wxHeadimgurl: '',
        age: '',
        job: '',
        label: [],
        group: [],
        marriage: '',
        introduce: '',
        credit: 0,
        vipGrade: '',
        lastLoginTime: '',
        inName: '',
        inPhone: '',
        status: '',
        friendsCnt: '',
        friendsPhotoUrl: '',
        friendsVideoUrl: '',
        gpsList: [],
        payPhotoUrl: ''
      },
      examineForm: {
        userId: '',
        friendsCnt: '',
        status: 1
      },
      finishCount: 0
    }
  },
  components: {
    HistoryOrder
  },
  created () {
    this.getDictionary('')
    // const dict = util.cookies.get('dictionary')
    // if (dict) {
    //   const labels = JSON.parse(dict).label
    //   labels.forEach(item => {
    //     this.labelData[item.code] = item.value
    //   })
    //   const sexs = JSON.parse(dict).sex
    //   sexs.forEach(item => {
    //     this.sexData[item.code] = item.value
    //   })
    //   const marrys = JSON.parse(dict).marriage
    //   marrys.forEach(item => {
    //     this.marryData[item.code] = item.value
    //   })
    // }

    this.queryGroupList()
    this.queryInfo()
  },
  mounted () {
    // this.queryInfo()
  },
  methods: {
    ...mapActions('d2admin/sys.person', [
      'personInfo',
      'personExamine'
    ]),
    ...mapActions('d2admin/pm.group', [
      'groupList'
    ]),
    ...mapActions('d2admin/pm.dictionary', [
      'dictLoad'
    ]),
    // 创建地图
    initMap (gps) {
      const center = new qq.maps.LatLng(gps[0].latitude, gps[0].longitude)
      const dom = this.$refs.map
      const map = new qq.maps.Map(dom, {
        center: center,
        zoom: 15,
        disableDefaultUI: true
      })

      let marker = null
      gps.forEach(item => {
        const mcenter = new qq.maps.LatLng(item.latitude, item.longitude)
        marker = new qq.maps.Marker({
          position: mcenter,
          animation: qq.maps.MarkerAnimation.DROP,
          map: map
        })
        // 添加到提示窗
        const info = new qq.maps.InfoWindow({
          map: map
        })
        // 获取标记的点击事件
        qq.maps.event.addListener(marker, 'click', function () {
          info.open()
          info.setContent('<div style="text-align:center;white-space:nowrap;' +
              'height: 20px;line-height: 20px">' + item.address + '</div>')
          info.setPosition(mcenter)
        })
      })
    },
    // 获取字典
    getDictionary (type) {
      this.dictLoad({ type }).then(res => {
        console.log('pm', res)
        const dict = res
        const labels = dict.label
        if (labels) {
          labels.forEach(item => {
            this.labelData[item.code] = item.value
          })
        }

        const sexs = dict.sex
        if (sexs) {
          this.sexArr = sexs
          sexs.forEach(item => {
            this.sexData[item.code] = item.value
          })
        }

        // const marrys = dict.marriage
        // if (marrys) {
        //   marrys.forEach(item => {
        //     this.marryData[item.code] = item.value
        //   })
        // }

        // if (type === 'country') {
        //   this.locationOptions = res.country
        // }
      })
    },
    // 查询人员详情
    queryInfo () {
      this.personInfo({
        userId: this.info.userId
      }).then(res => {
        console.log('resp', res)
        if (res.labels) {
          const labelVal = []
          res.labels.forEach(item => {
            labelVal.push(this.labelData[item])
          })
          res.orderLabelVal = labelVal
        }
        if (res.groups) {
          const groupVal = []
          res.groups.forEach(item => {
            groupVal.push(this.groupData[item])
          })
          res.orderGroupVal = groupVal
        }

        this.form = res
        // gps
        if (res.gpsList && res.gpsList.length > 0) {
          this.initMap(res.gpsList)
        }

        this.finishCount = res.completeOrderCnt
      })
    },
    // 查询分组列表
    queryGroupList () {
      this.form.orderGroupVal = []
      this.groupList({}).then(res => {
        res.forEach(item => {
          this.groupData[item.id] = item.name
        })
      })
    },
    // 查看历史派单
    onHistoryOrder () {
      this.historyVisible = true
    },
    // 关闭历史派单
    closeHistory (visible) {
      this.historyVisible = visible
    },
    // 关闭
    close () {
      this.$emit('close', false)
    },
    // 去审核
    examine () {
      this.$prompt('请确认好友数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[+]{0,1}(\d+)$/,
        inputErrorMessage: '请输入数字'
      }).then(({ value }) => {
        this.examineForm.friendsCnt = Number(value)
        this.examineForm.userId = this.form.userId

        this.personExamine(this.examineForm).then(
          res => {
            this.$emit('examine', false)
          }
        )
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss">
  .dialog-box {
    display: flex;
    flex-direction: row;

    .dialog-box-item {
      flex: 1;
      padding: 10px;
    }
    .value {
      border-bottom: 1px solid #DCDFE6;
      height: 40px;
      padding: 0 15px;
      &.textarea {
        padding: 5px 15px;
        line-height: 1.5;
        border-radius: 4px;
        box-sizing: border-box;
        overflow-y: auto;
      }
      &.tag {
        overflow-y: auto;
        max-height: 100px;
        height: auto;
        min-height: 40px;
        .el-tag {
          width: 60px;
          text-align: center;
          margin-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .effect {
      .el-form-item__label {
        float: none;
      }
    }
    .pic-box {
      width: 366px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .el-image {
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 114px;
        height: 114px;
        margin: 0 8px 8px 0;
        display: inline-block;
        text-align: center;
        line-height: 114px;
        color: #c5c5c5;
      }
      .video {
        width: 366px;
        height: 160px;
      }
      .no-video {
        width: 366px;
        height: 160px;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        text-align: center;
        line-height: 160px;
        color: #c5c5c5;
      }
    }
    .gps-box {
      width: 364px;
      height: 128px;
      overflow: hidden;
      background-color: #fff;
      border: 1px solid #c0ccda;
      border-radius: 6px;
    }
  }
</style>
